{extend name="public/base" /}
{block name="title"}权限组授权{/block}

{block name="main"}
<style>
    .e-show-hight span ,.e-show-hight span:hover{
        background-color:#1e9fff;        
    }
    
    .layui-form-checked .layui-icon-ok:before{
        font-size: 18px;
        font-weight: 900;
    }
    .layui-form-checked .layui-icon-ok{
        border-color: #f1a48c;
        background-color: #f1a48c;
    }
    i.layui-icon-ok{
        color: #fff !important;
    }
    
</style>

<div class="layui-tab" id="Js_title_navigation">
    <ul class="layui-tab-title">
        <li class="layui-this">角色授权</li>
    </ul>
</div>

<blockquote class="layui-elem-quote quoteBox">
<div class="layui-inline">
    <label class="layui-form-label">权限组：</label>
    <div class="layui-form-mid">{$roleinfo['role']}</div>
</div>

</blockquote>

<form class="layui-form " action="" method="post">
    <input type="hidden" name="roleid" value="{$roleid}" />
    <div class="layui-col-xs12 layui-col-sm12">
        <!--授权START-->        
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                {volist name="menulist" id="vo" key='k'}
                    <li {$k == 1 ? 'class="layui-this"':''} >{$vo['menuname']}</li>
                {/volist}
            </ul>            
            <div class="layui-tab-content" >                
                {volist name="menulist" id="vo1" key='k1'}
                <div class="layui-tab-item {$k1 == 1 ? 'layui-show':''} ">                
                    <!-- 一级菜单 START -->
                    <div class="layui-form-item" id="top_role_content">
                        {volist name="vo1['children']" id="vo2" key="vok"}
                            <div  data-id="{$vo2['id']}"  class="{:in_array($vo2['id'],$menuids)? 'layui-form-checked':'' } js_node_one layui-unselect layui-form-checkbox {$vok ==1 ?'e-show-hight':''} ">
                                <span>{$vo2['menuname']}</span><i class="layui-icon layui-icon-ok"></i>
                            </div>
                        {/volist}                        
        		   	</div>
                    <!-- 一级菜单 END -->
                    
                    <!--菜单和节点START-->
                    <table class="layui-table" lay-size="lg">
                      <tbody>
                        {volist name="vo1['children']" id="vv2" key="vvk2"}
                            {volist name="vv2['children']" id="vv3"}
                                <tr class="js_node_pid{$vv2['id']} js_tr" {$vvk2 !==1 ?'style="display: none;"':''} >
                                  <td  style="width: 100px;">
                                      <div data-url="{$vv3['menuurl']}" data-id="{$vv3['id']}" class="{:in_array($vv3['id'],$menuids)? 'layui-form-checked':'' } js_node_two layui-unselect layui-form-checkbox ">
                                            <span>{$vv3['menuname']}</span><i class="layui-icon layui-icon-ok"></i>
                                      </div>                                  
                                  </td>
                                  <td>
                                    {volist name="vv3['children']" id="vv4"}
                                        <div data-url="{$vv4['menuurl']}" data-id="{$vv4['id']}" class="{:in_array($vv4['id'],$menuids)? 'layui-form-checked':'' } js_node_pid{$vv3['id']} js_node_three layui-unselect layui-form-checkbox ">
                                            <span>{$vv4['menuname']}</span><i class="layui-icon layui-icon-ok"></i>
                                        </div>
                                    {/volist}
                                </tr>
                            {/volist}
                        {/volist}
                      </tbody>
                    </table>
                    <!--菜单和节点END-->        
                </div>
                {/volist}
            </div>    
        </div>
        <!--授权END-->
        <!--底部START-->        
        <div class="layui-form-item mt10 pt10">
            <div class="layui-input-block">
                <a href="javascript:;" class="layui-btn" id="saveFrom" >保存</a>
                <a href="javascript:history.back()" class="layui-btn layui-btn-primary closeBtn">取消</a>
            </div>
        </div>
        <!--底部EDN-->
    </div>
</form>
{/block}
{block name="script"}
<script>

layui.use(['form','element'], function(){
    var $ = layui.jquery ,element = layui.element; // Tab的切换功能，切换事件监听等，需要依赖element模块    
    // 切换显示节点
    $('div.js_node_one').on('click',function(){         
         var tID = $(this).data('id');
         $('.js_tr').hide();
         $('.js_node_pid'+tID).show();
         // 操作兄弟
         $('.js_node_one').removeClass('e-show-hight');
         $(this).addClass('e-show-hight');
         
    });  
    
    // 选中一级菜单
    var checkOneNode = function(){
        $('.js_node_one.e-show-hight').addClass('layui-form-checked');
    }
    
    // 一级菜单选择处理  
    $('div.js_node_one i.layui-icon').on('click',function(){
        var ischeck = $(this).parents('.js_node_one').hasClass('layui-form-checked');
        var thisID = $(this).parents('.js_node_one').data('id');
        if( ischeck ){
            $(this).parents('.js_node_one').removeClass('layui-form-checked');
            $('.js_node_pid'+thisID).find('.layui-form-checked').removeClass('layui-form-checked');
        }else{
            $(this).parents('.js_node_one').addClass('layui-form-checked');          
            $('.js_node_pid'+thisID).find('.layui-unselect').addClass('layui-form-checked');  
        }
    });
  
    // 二级菜单选择处理  
    $('.js_node_two').on('click',function(){
        var ischeck = $(this).hasClass('layui-form-checked');
        var thisID  = $(this).data('id');
        if( ischeck ){
            $(this).removeClass('layui-form-checked');
            $('.js_node_pid'+thisID).removeClass('layui-form-checked');
        }else{
            $(this).addClass('layui-form-checked');
            $('.js_node_pid'+thisID).addClass('layui-form-checked');
            checkOneNode(); // 选择一级
        }        
    });
    
    // 三级菜单选择处理  
    $('.js_node_three').on('click',function(){
        var ischeck = $(this).hasClass('layui-form-checked');
        var thisID  = $(this).data('id');
        if( ischeck ){
            $(this).removeClass('layui-form-checked');
        }else{
            $(this).addClass('layui-form-checked');
            $(this).parents('tr.js_tr').find('.js_node_two').addClass('layui-form-checked'); // 选中二级
            checkOneNode(); // 选择一级
        }         
    });
    
    // 提交表单保存
    $('#saveFrom').on('click',function(){
        var checkList =  $('div.layui-form-checked');
        var nodes = '';
        var roleid = $('input[name="roleid"]').val();
        $.each(checkList,function(k,v){
            nodes = nodes + ',' + $(this).data('id');
        });
       //layer.load(3);
        $.post("/sys/role/power",{nodes:nodes,id:roleid},function(data){
            layer.closeAll();
            if(data.code==1){
                layer.msg(data.msg,{icon:6});
                $.jump2(data.url);
            }else{
                layer.msg(data.msg,{icon:5});
            }
        },"json");
        return false;
    });
  
});
</script>
{/block}